<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet"
              crossorigin="anonymous">
    </head>
    <body>
        <div class="row">
            <div class="col-3"></div>
            <div class="col-6">
                <form method="post" action="user/index">
                    <div class="mb-3">
                        <label for="userNameId" class="form-label">姓名</label>
                        <input class="form-control" type="text" name="userName" id="userNameId" value="abc"/>
                    </div>
                    <div class="mb-3">
                        <label>性别</label>
                        <label for="userSexNan" class="form-label">男</label>
                        <input class="form-check-input" id="userSexNan" type="radio" name="userSex" value="男"/>
                        <label for="userSexNv" class="form-label">女</label>
                        <input class="form-check-input" id="userSexNv" type="radio" name="userSex" value="女"/>
                        <label for="userSexBaomi" class="form-label">保密</label>
                        <input class="form-check-input" id="userSexBaomi" type="radio" name="userSex" value="保密"/>
                    </div>
                    <div class="mb-3">
                        <label for="passwdId" class="form-label">密码</label>
                        <input class="form-control" type="password" id="passwdId" name="passwd" value="abc123"/>
                    </div>
                    <div class="mb-3">
                        <input class="btn btn-primary" type="submit" value="提交"/>
                    </div>
                </form>
                <button class="btn btn-primary" onclick="test()">测试一下</button>
                <button class="btn btn-primary" onclick="jqtest()">测试下jq</button>
                <button class="btn btn-primary" onclick="ajaxtest()">测试下ajax</button>
            </div>
            <div class="col-3"></div>
        </div>
        <div class="row">

            <div id="main" class="col-6 offset-3" style="height:400px;"></div>
        </div>
    </body>
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/echarts.js"></script>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        let main =  $("#main")[0];
        var myChart = echarts.init(main);

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '各个网站访问次数'
            },
            tooltip: {},
            legend: {
                data: ['访问次数']
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                    name: '访问次数',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        console.log(myChart);
    </script>
    <script type="text/javascript">
        // alert(a);
        function test(){
            var elementById = document.getElementById("userNameId");
            var value = elementById.value;
            console.log(value);
        }
        var jqtest =function(){
            let value = $("#userNameId").val();
            console.log("value:"+value);
        }

        var option =  myChart.getOption();
        console.log(option);
        var ajaxtest =function(){
            // let value = $("#userNameId").val();
            // console.log("value:"+value);
            $.ajax({
                type: "POST",
                url: "user/index",
                data: "userName=John&passwd=Boston",
                success: function(data){
                    let xData=[];
                    let yData=[];

                    for(let d  in data){
                        console.log(data[d]);
                        xData.push(data[d].name);
                        yData.push(data[d].count);
                    }
                    console.log(xData);
                    option.xAxis[0].data=xData;
                    option.series[0].data=yData;
                    myChart.setOption(option);
                }
            })
        }
        $(function (){
            ajaxtest();
        })
    </script>
</html>